<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="container">
    {{ now }}
    <p>
        computed properties:
        {{ getFullInfo }}, {{fullName}}
    </p>

    <p>
        通过函数调用的方式：{{ getFullInfoByMethod() }}
    </p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">

    const demoApp = {
        data() {
            return {
                name: 'bob',
                firstName: 'John',
                lastName: 'Doe',
                age: 12
            }
        },
        computed: {
            fullName: {

                get() {

                    return this.firstName + ' ' + this.lastName
                },
                set(newValue) {

                }
            },
            getFullInfo() { //虽然是一个函数，但是提供了get方法，组件可以直接调用
                return this.name + this.age
            },
            now() {
                return Date.now()
            }
        },
        mounted() {

        },
        methods: {
            getFullInfoByMethod() {
                return this.name + this.age
            }

        }

    }

    Vue.createApp(demoApp).mount('#container')
</script>

</body>
</html>
